<template>
  <div>
    <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="auto" class="demo-ruleForm" size="medium">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="巡检日期">
            <el-date-picker
              v-model="ruleForm.inspectDate"
              type="date"
              placeholder="选择日期"
              style="width: 100%;"
              :picker-options="pickerOptions"
              prop="inspectDate"
              required
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="起止位置" prop="beginSite" required>
            <el-input v-model="ruleForm.beginSite" clearable />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="检测总长" prop="totalLength" required>
            <el-input v-model="ruleForm.totalLength" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="检测总宽" prop="totalWidth" required>
            <el-input v-model="ruleForm.totalWidth" clearable />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item
            prop="damageType"
            :rules="[{ required: true, message: '必须选择损坏类型'}]"
            label="损坏类型"
          >
            <DamageTypeCascader @valueChanged="id=>{ruleForm.damageType=id}" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="损坏高度" prop="damageHeight" required>
            <el-input v-model="ruleForm.damageHeight" clearable />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="损害总长" prop="damageLength" required>
            <el-input v-model="ruleForm.damageLength" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="损坏总宽" prop="damageWidth" required>
            <el-input v-model="ruleForm.damageWidth" clearable />
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item label="损坏情况描述" prop="desc">
        <el-input v-model="ruleForm.desc" type="textarea" clearable />
      </el-form-item>

      <el-form-item label="备注" prop="remark">
        <el-input v-model="ruleForm.remark" type="textarea" clearable />
      </el-form-item>

      <el-form-item>
        <el-row type="flex" class="row-bg" justify="end">
          <el-button @click="colseDialog">取 消</el-button>
          <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
        </el-row>
      </el-form-item>

    </el-form>
  </div>
</template>

<script>
import { addPavementDamage, updatePavementDamage } from '@/api/regularInspection'
import DamageTypeCascader from '@/views/daily-inspection/components/DamageTypeCascader'

export default {
  components: { DamageTypeCascader },
  props: {
    ruleForm: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        }
      },
      rules: {
        beginSite: [
          { required: true, message: '开始位置是必填项', trigger: ['blur', 'change'] }
        ],
        totalLength: [
          { required: true, message: '检测总长是必填项', trigger: ['blur', 'change'] }
        ],
        totalWidth: [
          { required: true, message: '检测总宽是必填项', trigger: ['blur', 'change'] }
        ],
        damageType: [
          { required: true, message: '损坏类型是必填项', trigger: ['blur', 'change'] }
        ],
        damageHeight: [
          { required: true, message: '损坏高度是必填项', trigger: ['blur', 'change'] }
        ],
        damageLength: [
          { required: true, message: '损坏总长是必填项', trigger: ['blur', 'change'] }
        ],
        damageWidth: [
          { required: true, message: '损坏总宽是必填项', trigger: ['blur', 'change'] }
        ],
        inspectDate: [
          { required: true, message: '巡检日期是必填项', trigger: ['blur', 'change'] }
        ],
        desc: [
          { required: true, message: '损坏情况描述是必填项', tirgger: ['blur', 'change'] }
        ]
      }
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const mm = this.ruleForm.inspectDate.getMonth() + 1
          const dd = this.ruleForm.inspectDate.getDate()
          if (this.ruleForm.damageId == null) {
            addPavementDamage({ inspectorID: this.ruleForm.userId,
              comNumber: 1,
              regularInspectionID: this.ruleForm.regularInspectionID,
              inspectionDate: [this.ruleForm.inspectDate.getFullYear(),
                (mm > 9 ? '' : '0') + mm,
                (dd > 9 ? '' : '0') + dd
              ].join('-'),
              SAEPlace: this.ruleForm.beginSite,
              totalLength: this.ruleForm.totalLength,
              totalWidth: this.ruleForm.totalWidth,
              damageTypeID0: this.ruleForm.damageType,
              damageLength0: this.ruleForm.damageLength,
              damageWidth0: this.ruleForm.damageWidth,
              damageHeight0: this.ruleForm.damageHeight,
              damagePAC0: this.ruleForm.desc,
              remarks: this.ruleForm.remarks
            }).then(() => {
              this.$message.success('添加成功')
              this.$emit('close-dialog')
              this.$emit('damage-submited')
            })
          } else {
            updatePavementDamage({
              inspectorID: this.ruleForm.userId,
              pavementDamageComID: this.ruleForm.damageComId,
              regularInspectionID: this.ruleForm.regularInspectionID,
              inspectionDate: [this.ruleForm.inspectDate.getFullYear(),
                (mm > 9 ? '' : '0') + mm,
                (dd > 9 ? '' : '0') + dd
              ].join('-'),
              SAEPlace: this.ruleForm.beginSite,
              totalLength: this.ruleForm.totalLength,
              totalWidth: this.ruleForm.totalWidth,
              damageTypeID: this.ruleForm.damageType,
              damageLength: this.ruleForm.damageLength,
              damageWidth: this.ruleForm.damageWidth,
              damageHeight: this.ruleForm.damageHeight,
              damagePAC: this.ruleForm.desc,
              remarks: this.ruleForm.remarks,
              pavementDamageID: this.ruleForm.damageId
            }).then(() => {
              this.$message.success('更新成功')
              this.$emit('close-dialog')
              this.$emit('damage-submited')
            })
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    colseDialog() {
      this.$emit('close-dialog')
    }
  }
}
</script>
